// global-flex.scss

// 定义flex容器样式
.flex {
	display: flex;
}
.overflow-hidden {
	overflow: hidden;
}

// 定义flex项样式
.flex-1 {
	flex: 1;
}
.flex-2 {
	flex: 2;
}

.flex-col {
	display: flex;
	flex-direction: column;
}

.flex-row {
	display: flex;
	flex-direction: row;
}

// 水平居中flex容器中的项
.flex-j {
	display: flex;
	justify-content: center; // 在主轴上居中
}
.flex-a {
	display: flex;
	align-items: center;
}
// 居中flex容器中的项（水平和垂直）
.flex-c {
	display: flex;
	justify-content: center;
	align-items: center;
}

// 反转主轴方向
.flex-reverse {
	display: flex;
	flex-direction: row-reverse; // 水平方向反转
}

// 设置flex容器为换行显示
.flex-wrap {
	display: flex;
	flex-wrap: wrap;
}

// 设置flex项在换行时的对齐方式
.flex-a-between {
	display: flex;
	align-content: space-between; // 项目分散对齐
}
.flex-a-end {
	display: flex;
	align-items: flex-end;
}
// 底部对齐
.flex-a-baseline {
	display: flex;
	align-items: baseline;
}

// 等高分布flex容器中的项
.flex-equal-height {
	display: flex;
	align-self: stretch;
}

// 设置flex项的排序顺序
.flex-order {
	order: 1; // 设置项的排序顺序为1
}
.space-between {
	display: flex;
	justify-content: space-between;
}
.space-evenly {
	display: flex;
	justify-content: space-evenly;
}
.space-around {
	display: flex;
	justify-content: space-around;
}
.align-baseline {
	display: flex;
	align-items: baseline;
}

.flex-j-end {
	display: flex;
	justify-content: flex-end;
}
.flex-j-start {
	display: flex;
	justify-content: flex-start;
}

.pos-abs {
	position: absolute;
}
.pos-fix {
	position: fixed;
}
.pos-rel {
	position: relative;
}

.d-block {
	display: block;
}
.d-i-block {
	display: inline-block;
}
